<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" href="../../assets/common/common.css" />
    <link rel="stylesheet" href="../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./Login.css" />
  </head>
  <body>
    <div class="Login pl-15 pr-15">
      <!-- 顶部 -->
      <div class="banner">
        <a href="" class="iconfont icon-zuojiantou"></a>
      </div>
      <!-- 图片层 -->
      <div class="topImg fcc">
        <img class="img" src="../../assets/img/Login/u2152.png" alt="" />
      </div>
      <div>
        <!-- 手机验证码登录 -->
        <div class="inpList pl-15 pr-15">
          <div class="f24 fcc">手机验证码登录</div>
          <div class="item flex aic pr-15 mt-40">
            <span class="text fcc b-r f14">+86</span>
            <input
              class="inp f16 pl-15"
              type="text"
              placeholder="请输入手机号码"
            />
            <img class="dsn" src="../../assets/img/Login/1_u2116.png" alt="" />
          </div>
          <div class="item flex aic jc-c mt-15">
            <input
              class="inp f16 pl-15"
              type="text"
              placeholder="请输入验证码"
            />
            <img
              class="pr-5 dsn"
              src="../../assets/img/Login/1_u2116.png"
              alt=""
            />
            <span class="button fcc f.on('click',function(){ })c f12 bule"
              >获取验证码</span
            >
          </div>
          <div class="flex aic f12 mt-20 gary">
            <input type="checkbox" />
            <span class="pl-15">我已经阅读并同意</span>
            <span class="bule">《用户隐私政策》</span>
          </div>
          <a href="../index/index.html" class="but fcc mt-20 fff">登录</a>
          <div class="change bule flex aic jc-sb f14 mt-15">
            <span>账号密码登录</span>
            <span>注册新用户</span>
          </div>
        </div>
        <!-- 账号密码登录 -->
        <div class="inpList pl-15 pr-15 dsn">
          <div class="f24 fcc">账号密码登录</div>
          <div class="item flex aic jc-sb pl-15 pr-15 mt-40">
            <input class="inp f16" type="text" placeholder="请输入手机号码" />
            <img class="dsn" src="../../assets/img/Login/1_u2116.png" alt="" />
          </div>
          <div class="item flex aic jc-sb pl-15 pr-15 mt-15">
            <input class="inp f16" type="text" placeholder="请输入密码" />
            <img class="dsn" src="../../assets/img/Login/1_u2116.png" alt="" />
          </div>
          <div class="flex aic jc-sb f12 mt-20 gary">
            <div class="flex aic jc-c">
              <input type="checkbox" />
              <span class="pl-5">我已经阅读并同意</span>
              <span class="bule">《用户隐私政策》</span>
            </div>
            <div>忘记密码？</div>
          </div>
          <a href="../index/index.html" class="but fcc mt-20 fff">登录</a>
          <div class="change bule flex aic jc-sb f14 mt-15">
            <span>免密登录</span>
            <span>注册新用户</span>
          </div>
        </div>
        <!-- 注册账号-->
        <div class="inpList pl-15 pr-15 dsn">
          <div class="f24 fcc">注册账号</div>
          <div class="item flex aic pr-15 mt-40">
            <span class="text fcc b-r f14">+86</span>
            <input
              class="inp f16 pl-15"
              type="text"
              placeholder="请输入手机号码"
            />
            <img class="dsn" src="../../assets/img/Login/1_u2116.png" alt="" />
          </div>
          <div class="item flex aic jc-c mt-15">
            <input
              class="inp f16 pl-15"
              type="text"
              placeholder="请输入验证码"
            />
            <img
              class="pr-5 dsn"
              src="../../assets/img/Login/1_u2116.png"
              alt=""
            />
            <span class="button fcc f.on('click',function(){ })c f12 bule"
              >获取验证码</span
            >
          </div>
          <div class="item flex aic jc-sb pl-15 pr-15 mt-15">
            <input class="inp f16" type="text" placeholder="请输入密码" />
            <img class="dsn" src="../../assets/img/Login/1_u2116.png" alt="" />
          </div>
          <div class="item flex aic jc-sb pl-15 pr-15 mt-15">
            <input class="inp f16" type="text" placeholder="请输入企业邀请码" />
            <img class="dsn" src="../../assets/img/Login/1_u2116.png" alt="" />
          </div>
          <div class="flex aic f12 mt-20 gary">
            <input type="checkbox" />
            <span class="pl-15">我已经阅读并同意</span>
            <span class="bule">《用户隐私政策》</span>
          </div>
          <div class="but fcc mt-20 fff">立即注册</div>
          <div class="change bule flex aic jc-c f14 mt-15">
            <span>已有账户,去登录</span>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    function inpChange() {
      $(".inpList").on("click", ".inp", function () {
        $(this).parent().siblings().removeClass("active");
        $(this).parent().addClass("active");
        $(this).parent().siblings().find("img").hide();
      });
      $(".inpList").on("keypress", ".inp", function (ev) {
        if (ev.key) {
          $(this).next().show();
        }
      });
    }
    inpChange();

    function listChange() {
      $(".change").on("click", "span", function () {
        if ($(this).text() == "账号密码登录") {
          $(this).closest(".inpList").next().show();
          $(this).closest(".inpList").next().siblings().hide();
        } else if ($(this).text() == "注册新用户") {
          $(this).closest(".inpList").hide();
          $(this).closest(".inpList").next().hide();
          $($(".inpList")[2]).show();
        } else if ($(this).text() == "免密登录") {
          $($(".inpList")[1]).hide();
          $($(".inpList")[0]).show();
        } else if ($(this).text() == "已有账户,去登录") {
          $($(".inpList")[0]).show();
          $(this).closest(".inpList").hide();
        }
      });
      $(".but").click(function () {
        if ($(this).text() == "立即注册") {
          $(this).closest(".inpList").hide();
          $($(".inpList")[0]).show();
        }
      });
    }
    listChange();

    function phone() {
      $(".inpList").on("click", ".button", function () {
        var phoneStr = $(this).parent().find(".inp").val();
        var reg = /^\d{4}$/;
        var time = 60;
        if (!reg.test(phoneStr.trim())) {
          alert("请正确输入手机号");
          return false;
        }
        var timer = setInterval(function () {
          $(".button").text(time--);
          if (time === 0) {
            clearInterval(timer);
            $(".button").text("再次获取");
          }
        }, 1000);
      });
    }
    phone();
  </script>
</html>
